<template>
    <section class="card">
        <header>
            <hgroup>
                <h4 class="title-main">{{ title_main }}</h4>
                <h5 v-if="title_sub" class="title-sub">{{ title_sub }}</h5>
            </hgroup>
            <ul class="tag-menu">
                <li 
                    v-for="item in tab" 
                    :key="item.value" 
                    :class="{current: item.value === tab_current}"
                    @click="handlerTab(item)"
                >{{ item.label }}</li>
            </ul>
        </header>
        <div class="content-wrap">
            <div v-if="options.length" class="check-list">
                <label>其他选项：</label>
                <span 
                    v-for="item in options" 
                    :key="item.value" 
                    :class="{active: item.active || item.value === option_current}"
                    @click="handlerOptions(item)"
                >{{ item.label }}</span>
            </div>
            <div class="main-wrap">
                <slot></slot>
                <!-- <div class="render-wrap">内容区</div> -->
            </div>
        </div>
    </section>
</template>

<!-- demo-componente-html -->


<script>
import { reactive, toRefs } from "vue";
export default {
    name: "Children",
    props: {
        titleMain: {
            type: String,
            default: ''
        },
        titleSub: {
            type: String,
            default: ''
        },
        tabList: {
            type: Array,
            default: () => []
        },
        options: {
            type: Array,
            default: () => []
        },
        // 多选
        multiple: Boolean
    },
    emits: ["callbackTab", "callbackOptions"],
    setup(props, { emit }){  // 只能获取初始化的东西
        console.log(111, props.tabList)
        const data = reactive({
            // tab的选中
            tab_current: (props.tabList.length > 0) && props.tabList[0].value,  // all
            title_main: props.titleMain,
            title_sub: props.titleSub,
            tab: props.tabList,
            option_current: (props.options.length > 0) && props.options[0].value,  // all
            options: props.options,
        })

        /** tab toggle */
        const handlerTab = (params) => {
            data.tab_current = params.value
            /** 事件回调 */
            emit("callbackTab", params)
        }
        /** tab toggle */
        const handlerOptions = (params) => {
            /** 多选 */
            if(props.multiple) {
                handlerMultiple(params)
                return false
            }
            data.option_current = params.value
            /** 事件回调 */
            emit("callbackOptions", params)
        }
        /** 多选 */
        const handlerMultiple = (params) => {
            params.active = !params.active
            /** 第一个选项 */
            const first_option = data.options[0]
            /** 是否选择了全部选项 */
            const is_all = params.value === 'all'
            if(is_all) {
                data.options.forEach(item => {
                    item.active = false
                })
                first_option.active = true
            }
            data.option_current = ''
            /** 获取选中的数据 */
            const select_option = data.options.filter(item => item.active)
            first_option.active = is_all || select_option.length === 0
            // 返回数据
            emit("callbackOptions", select_option.length !== 0 ?select_option : first_option)
        }

        return {
            ...toRefs(data),
            handlerTab,
            handlerOptions
        }
    }
}
</script>

<style lang="scss" scoped>
.card {
    display: flex;
    flex-direction: column;
    height: 400px;
    background-color: #fff;
    border-radius: 15px;
    padding: 0 32px 32px;
    header {
        height: 60px;
        border-bottom: 1px solid #e1e1e1;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
hgroup {
    display: flex;
    align-items: center;
    .title-main {
        font-size: 14px;
    }
    .title-sub {
        position: relative;
        margin-left: 24px;
        font-weight: normal;
        color: #999;
        &:before {
            content: "";
            position: absolute;
            left: -12px;
            top: 3px;
            height: 12px;
            border-left: 1px solid #e7e7e7;
        }
    }
}
.tag-menu {
    display: flex;
    align-items: center;
    list-style: none;
    li {
        position: relative;
        cursor: pointer;
        height: 60px;
        line-height: 60px;
    }
    li + li {
        margin-left: 24px;
    }
    .current {
        color: #004ce8;
        &:after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            border-bottom: 2px solid #004ce8;
        }
    }
}
.content-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.check-list {
    padding-top: 16px;
    font-size: 12px;
    span {
        display: inline-block;
        height: 24px;
        padding: 0 8px;
        line-height: 24px;
        border-radius: 100px;
        cursor: pointer;
        + span { margin-left: 8px; }
    }
    .active {
        background-color: #004ce8;
        color: #fff;
    }
    span:hover {
        background-color: #004ce8;
        color: #fff;
    }
}
.main-wrap {
    flex: 1;
    height: 0;
    padding-top: 16px;
}
.render-wrap {
    height: 100%;
    background-color: #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #e0e0e0;
}
</style>